<template>
	<view class="page">
		<view class="form-wrap">
			<u-form labelWidth="220rpx">
				<u-form-item label="置顶价格：" prop="name" borderBottom required>
					<u-input v-model="Zfobj.zfPrice" border="none" disabled disabledColor="#fff" inputAlign="right" placeholder="请输入" />
				</u-form-item>
				<u-form-item label="置顶天数：" prop="name" borderBottom required>
					<u-input @change="change" v-model="day" border="none" inputAlign="right" placeholder="请输入置顶天数" />
				</u-form-item>
				<u-form-item label="置顶消耗积分：" prop="name" required>
					<u-input v-model="xiaoH" border="none" disabled disabledColor="#fff" inputAlign="right" placeholder="置顶消耗积分" />
				</u-form-item>
			</u-form>
		</view>
		<view class="tip">
			您还剩余<text>{{Zfobj.jfye}}</text>积分
		</view>
		<view class="btm-wrap">
			<view class="btn confim-btn" @click="submit">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileServer: this.$fileServer,
				Zfobj:{},
				day:'',
				xiaoH:'',
			};
		},
		onLoad() {
			this.$api.talk.getZfxxJifen({code:'mingpianZhiDing'}).then(res => {
				// console.log(res)
				if(res.flag){
					this.Zfobj = res.data;
				}
			})
			
		},
		methods: {
			change(){
				this.xiaoH = this.Zfobj.zfPrice*this.day
			},
			submit(){
				console.log(this.form)
				if(!this.day){
					uni.showToast({
						title: '请输入置顶天数',
						icon: "none"
					})
					return false
				}
				if(this.Zfobj.jfye - this.xiaoH<0){
					uni.showToast({
						title: '积分不足',
						icon: "none"
					})
					return false
				}
				this.$api.member.zhidingMp({day:this.day,zdprice:this.Zfobj.zfPrice}).then(res => {
					console.log(res)
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					if(res.flag){
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {background-color: #F5F5F5;min-height: 100vh;padding: 30rpx;
		.form-wrap {
		
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 30rpx;
		
			.tx-wrap {
				display: flex;
				width: 100%;
				justify-content: flex-end;
			}
		
			.tx {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
		
			}
		}
		.tip{padding: 30rpx;font-size: 28rpx;color: #333;
			text{color: #EC2424;}
		}
		.btm-wrap {
			width: 100%;
			position: fixed;
			bottom: 50rpx;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-around;
			z-index: 99;
		
			.btn {
				width: 80%;
				height: 80rpx;
				border-radius: 42rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				&.confim-btn {
					color: #FFFFFF;
					background: #EC2424;
				}
			}
		}
	}
</style>